<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <ui:composition template="/view/template.xhtml">
        <ui:define name ="head">
            <script type="text/javascript">
                function handleCalculateRequest(xhr, status, args) {
                        if(args.success) {
                                payrollDialog.show();
                        } 
                }

                  function handleConfirmRequest(xhr, status, args) {
                        if(args.success) {
                                payrollDialog.hide();
                        }
                }
            </script>
            <style type="text/css">

                .ui-picklist-source, .ui-picklist-target {
                    width: 100%;
                    height: 100%;
                }

                .ui-picklist-control {
                    cursor: pointer;
                }

                .col1, .col2 {
                    vertical-align: top;
                }
            </style>
        </ui:define>

        <ui:define  name="content">
            <f:view>
                <h:form id="form1">
                    <p:dataTable id="employees" value="#{employeeManager.employeeList}" var="item" paginator="true" rows="20"
                                 selectionMode="multiple"   selection="#{employeeManager.selecteEmployeeList}">
                        <f:facet name="header">
                            <h:panelGrid columns="2" cellpadding="0" cellspacing="0">
                                <p:breadCrumb preview="true" expandEffectDuration="200" previewWidth="20" style="width:400px" expandedBeginningItems="1" expandedEndItems="0">
                                    <p:menuitem value="选项"/>
                                    <p:menuitem value="显示所有" actionListener="#{employeeManager.searchAll}" update="form1:employees"/>
                                    <p:menuitem value="显示本月未发工资员工" actionListener="#{employeeManager.searchAll}" update="form1:employees"/>
                                </p:breadCrumb>
                                <h:panelGrid columns="6" style="width: 500px">
                                    <h:outputLabel value="模糊查询"></h:outputLabel>
                                    <h:inputText value="#{employeeManager.searchContent}" title="可输入职员名称或电话进行查询"></h:inputText>
                                    <p:commandLink update="form1:employees" actionListener="#{employeeManager.searchByContent}">
                                        <p:graphicImage value="/resources/images/search.png"/>
                                    </p:commandLink>
                                    <p:ajaxStatus  style="width:16px;height:16px;">
                                        <f:facet name="start">
                                            <h:graphicImage  value="/resources/images/ajaxloading.gif" />
                                        </f:facet>
                                        <f:facet name="complete">
                                            <h:outputText value=""/>
                                        </f:facet>
                                    </p:ajaxStatus>
                                    <h:selectOneMenu value="#{employeeManager.selectedDepartment}">
                                        <f:selectItem itemLabel="部门" itemValue=""></f:selectItem>
                                        <f:selectItems value="#{departmentManager.departmentItems}"></f:selectItems>
                                        <p:ajax  update="form1:employees,form1:posts" listener="#{employeeManager.searchByDepartment}" />
                                    </h:selectOneMenu>
                                    <h:selectOneMenu id="posts" value="#{employeeManager.selectedPost}">
                                        <f:selectItem itemLabel="职位" itemValue=""></f:selectItem>
                                        <f:selectItems value="#{employeeManager.postSelectItems}"></f:selectItems>
                                        <p:ajax  update="form1:employees" listener="#{employeeManager.searchByDepartmentPost}" />
                                    </h:selectOneMenu>
                                </h:panelGrid>
                            </h:panelGrid>
                        </f:facet>
                        <p:column expansion="true"/>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="姓名"/>
                            </f:facet>
                            <h:outputText value="#{item.name}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="生日"/>
                            </f:facet>
                            <h:outputText value="#{item.birthday}">
                                <f:convertDateTime pattern="yyyy-MM-dd/" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="身份证号"/>
                            </f:facet>
                            <h:outputText value="#{item.idCardNum}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="电话"/>
                            </f:facet>
                            <h:outputText value="#{item.phone}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="地址"/>
                            </f:facet>
                            <h:outputText value="#{item.address}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="邮件"/>
                            </f:facet>
                            <h:outputText value="#{item.email}"/>
                        </p:column>

                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="备注"/>
                            </f:facet>
                            <h:outputText value="#{item.remarks}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="基本工资"/>
                            </f:facet>
                            <h:outputText value="#{item.baseSalary}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="部门"/>
                            </f:facet>
                            <h:outputText value="#{item.departmentPost}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="账户名"/>
                            </f:facet>
                            <h:outputText value="#{item.xtduser.username}"/>
                        </p:column>

                        <f:facet name="expansion">
                            <p:dataTable id="payrollHistory" value="#{item.payrollRecordCollection}" var="payroll">
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="基本工资"/>
                                    </f:facet>
                                    <h:outputText value="#{payroll.baseSalary}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="提成"/>
                                    </f:facet>
                                    <h:outputText value="#{payroll.royalty}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="优质服务"/>
                                    </f:facet>
                                    <h:outputText value="#{payroll.qualityService}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="起始时间"/>
                                    </f:facet>
                                    <h:outputText value="#{payroll.startDate}">
                                        <f:convertDateTime pattern="MM/dd/yyyy" />
                                    </h:outputText>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="终止时间"/>
                                    </f:facet>
                                    <h:outputText value="#{payroll.endDate}">
                                        <f:convertDateTime pattern="MM/dd/yyyy" />
                                    </h:outputText>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="派发日期"/>
                                    </f:facet>
                                    <h:outputText value="#{payroll.issueDate}">
                                        <f:convertDateTime pattern="MM/dd/yyyy" />
                                    </h:outputText>
                                </p:column>

                            </p:dataTable>
                        </f:facet>
                        <f:facet name="footer">
                            <h:outputLabel value="起止时间:"></h:outputLabel>
                            <p:calendar value="#{employeeManager.startDate}" pattern="yyyy-MM-dd" ></p:calendar>
                            <h:outputLabel value="至"></h:outputLabel>
                            <p:calendar value="#{employeeManager.endDate}" pattern="yyyy-MM-dd" ></p:calendar>
                            <p:commandButton  value="计算选定" actionListener="#{employeeManager.calulatePayroll}" update="form2:payrolls,form:growl" oncomplete=" handleCalculateRequest(xhr, status, args)"></p:commandButton >
                            <p:commandButton  value="计算所有" actionListener="#{employeeManager.calulateAllPayrolls}" update="form2:payrolls,form:growl" oncomplete=" handleCalculateRequest(xhr, status, args)"></p:commandButton >
                        </f:facet>
                    </p:dataTable>
                </h:form>
                <p:dialog widgetVar="payrollDialog" modal="true" header="工资计算" width="600" >
                    <h:form id="form2">
                        <p:dataTable id="payrolls" value="#{employeeManager.payrollList}" var="item">
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="名称"/>
                                </f:facet>
                                <h:outputText value="#{item.employee.name}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="基本工资"/>
                                </f:facet>
                                <h:outputText value="#{item.baseSalary}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="提成"/>
                                </f:facet>
                                <h:outputText value="#{item.royalty}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="优质服务"/>
                                </f:facet>
                                <h:outputText value="#{item.qualityService}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="起始时间"/>
                                </f:facet>
                                <h:outputText value="#{item.startDate}">
                                    <f:convertDateTime pattern="yyyy-MM-dd" />
                                </h:outputText>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="终止时间"/>
                                </f:facet>
                                <h:outputText value="#{item.endDate}">
                                    <f:convertDateTime pattern="yyyy-MM-dd" />
                                </h:outputText>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="派发日期"/>
                                </f:facet>
                                <h:outputText value="#{item.issueDate}">
                                    <f:convertDateTime pattern="yyyy-MM-dd" />
                                </h:outputText>
                            </p:column>
                            <f:facet name="footer">
                                <p:commandButton value="确认派发" actionListener="#{employeeManager.confirmPayrolls}" update="form1:employees,form:growl"/>
                            </f:facet>
                        </p:dataTable>
                    </h:form>
                </p:dialog>
            </f:view>
        </ui:define>
    </ui:composition>
</html>
